<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/css/main.css" th:href="@{/static/css/main.css}">
    <title>图书简介</title>
</head>
<body>
<nav class="nav nav-pills nav-justified">
    <a class="nav-link" th:href="@{/book/randBook}">首页</a>
    <a class="nav-link" th:href="@{/book/bookBrother}">分类与购买</a>
    <a class="nav-link " th:href="@{/admin/userCenter}">个人中心</a>
    <a class="nav-link" th:href="@{/shop/selectAllShop}">购物车</a>
    <a class="nav-link" th:href="@{/order/selectOrderLastAll}">查询订单</a>
</nav>
<div class="jumbotron">
    <h1 class="display-4" style="margin-left: 600px">《[[${book.bookName}]]》</h1>
    <button type="button"  th:onclick="|shop(${book.id})|"  class="del btn btn-danger">加入购物车</button>
    <hr class="my-4">
    <p class="lead" th:text="${book.content}">书的具体内容</p>
</div>

    <div class="row" th:each="comment:${comments}">
        <br>
        <br>
        <br>
    <img th:src="@{/static/img/dog.jpeg}" src="../../../static/img/dog.jpeg" style="float: left ;width: 60px;height: 60px" class="align-self-start mr-3" alt="...">
        <h5 >[[${comment.name}]]：</h5>
        <h5 >[[${comment.content}]]</h5>
    </div>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<script>
    function shop(bookId) {
        $.ajax({
            url:'/bookCity/addShop',
            data:{
                bookId:bookId
            },
        })
        alert("加入购物车成功!");
    }

</script>
</body>
</html>